import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'

import { Button, List, InputItem, WingBlank, WhiteSpace } from 'antd-mobile'
import Logo from '../../component/logo'
import { actionCreator } from '../../store/user'
import form from '../../component/hoc/form'
import '../../index.css'



class Login extends Component {
  constructor(props) {
    super(props)
    this.register = this.register.bind(this)
    this.state = {
      pwd: '',
      user: ''
    }
  }
  render() {
    const { msg, redirectTo } = this.props;
    const pathname = this.props.location.pathname
    return (
      <div>
        {redirectTo && redirectTo !== pathname ? <Redirect to={redirectTo}></Redirect> : null}
        <Logo></Logo>
        <WingBlank>
          <span className="error-msg">{msg}</span>
          <List>
            <InputItem
              onChange={(v) => this.props.handleChange('user', v)}
            >
              用户
            </InputItem>
            <InputItem
              type='password'
              onChange={(v) => this.props.handleChange('pwd', v)}
            >
              密码
            </InputItem>
          </List>
          <WhiteSpace></WhiteSpace>
          <Button
            type='primary'
            onClick={() => this.handleClick(this.props.state)}
          >
            登录
          </Button>
          <WhiteSpace></WhiteSpace>
          <Button
            type='primary'
            onClick={this.register}
          >
            注册
          </Button>
        </WingBlank>
      </div>
    )
  }
  register() {
    this.props.history.push('/register')
  }
  handleClick(data) {
    this.props.login(data)
  }
}
const mapState = (state) => ({
  msg: state.user.msg,
  redirectTo: state.user.redirectTo
})
const mapDispatch = (dispatch) => ({
  login(data) {
    dispatch(actionCreator.login(data))
  }
})

export default connect(mapState, mapDispatch)(form(Login))